<template>
  <div class="kezipage">
    <el-row class="topInfo">
      <el-col :span="6"> 订单：{{orderRowData.order_no}} </el-col>
      <el-col :span="6"> 订单总价：{{orderRowData.price}} </el-col>
      <el-col :span="6"> 已付金额：{{orderRowData.amount_paid}} </el-col>
      <el-col :span="6"> 未付金额：{{orderRowData.remaining_amount}} </el-col>
      <el-col :span="6"> 流程：{{orderRowData.state_name}} </el-col>
      <el-col :span="6"> 当前员工：{{employee_name}} </el-col>
      <el-col :span="6"> 门市：{{orderRowData.store_employee}} </el-col>
      <!-- <el-col :span="6"> 订单时间：{{orderRowData.order_time}} </el-col> -->
      <!-- <el-col :span="6"> 订单金额：{{orderRowData.price}} </el-col> -->
      <!-- <el-col :span="6"> 已收金额：{{orderRowData.amount_paid}} </el-col> -->
      <!-- <el-col :span="6"> ERP：已同步 </el-col> -->
      <el-col :span="6"> 客服：{{orderRowData.customer_service}} </el-col>
    </el-row>
    <el-row class="contentInfo">
      <div class="tabsdiv">
        <Tabs :value="name" @on-click="handleEditTabClick" :animated="false" name="2">
            <TabPane tab="2" label="详情" name="yaoyue" icon="md-list">
              <Detail></Detail>
            </TabPane>
            <TabPane tab="2" label="消费" name="mendian" icon="ios-cart">
              <Consume></Consume>
            </TabPane>
            <TabPane tab="2" label="排控" name="genzongjilu" icon="md-calendar">
              <EmissionControl></EmissionControl>
            </TabPane>
            <TabPane tab="2" label="外发" name="bianji" icon="md-open">
              <OutGoing></OutGoing>
            </TabPane>
            <TabPane tab="2" label="回件" name="feiyong" icon="md-repeat">
              <Reply></Reply>
            </TabPane>
            <TabPane tab="2" label="取件" name="rizhi" icon="md-filing">
              <PickUp></PickUp>
            </TabPane>
            <TabPane tab="2" label="单据" name="jiedan" icon="md-print"> 接单 </TabPane>
            <Dropdown slot="extra">
              <a href="javascript:void(0)">
                  更多
                  <Icon type="ios-arrow-down"></Icon>
              </a>
              <DropdownMenu slot="list">
                  <DropdownItem>操作日志</DropdownItem>
              </DropdownMenu>
          </Dropdown>
        </Tabs>
      </div>
    </el-row>
  </div>
</template>

<script>
  import { mapGetters } from "vuex";
  import Detail from './orderTabs/detail.vue'
  import Consume from './orderTabs/consume.vue'
  import OutGoing from './orderTabs/outGoing.vue'
  import Reply from './orderTabs/reply.vue'
  import Edit from './tabs/Edit.vue'
  import EmissionControl from './orderTabs/emissionControl.vue'
  import PickUp from './orderTabs/pickUp.vue'
  export default {
    components: {
      Detail,
      Consume,
      OutGoing,
      Edit,
      EmissionControl,
      PickUp,
      Reply,
    },
    computed: {
      ...mapGetters(["employee_name"]),
    },
    data() {
      return {
        name: 'yaoyue',
        orderRowData: {}
      }
    },
    watch: {
      '$store.state.layout.app.orderRowData'(newValue, oldValue) {
        this.orderRowData = newValue
        for (let key in this.orderRowData) {
          if (this.orderRowData[key] == null || this.orderRowData[key] == "null") {
            this.orderRowData[key] = ""
          }
        }
      }
    },
    created() {
      this.rowData = this.$store.state.layout.app.rowData
      for (let key in this.orderRowData) {
        if (this.orderRowData[key] == null || this.orderRowData[key] == "null") {
          this.orderRowData[key] = ""
        }
      }
    },
    methods: {
      handleQueryALlKz() {
        console.log('kezi');
        this.$emit('queryALlKzkezi')
      },
      handleEditTabClick() {

      }
    },
  }
</script>

<style scoped lang="less">
.kezipage {
  height: 63vh;
  // padding: 0 15px;
  .topInfo {
    padding: 5px 10px;
    font-size: 12px;
    color: #888;
    border-bottom: 1px solid #eee;
    .el-col {
      margin-bottom: 8px;
    }
  }
}
</style>
